<template>
  <div class="container">
    <el-dialog :visible="showDialog" title="题目预览" @close="btnCancel">
      <el-row>
        <el-col :span="6">
          <div>【题型】：{{ questionType(dialogObj.questionType) }}题</div>
        </el-col>
        <el-col :span="6">
          <div>【编号】：{{ dialogObj.id }}</div>
        </el-col>
        <el-col :span="6">
          <div>【难度】：{{ diffType(dialogObj.difficulty) }}</div>
        </el-col>
        <el-col :span="6">
          <div>【标签】：{{ dialogObj.tags }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div>【学科】：{{ dialogObj.subjectName }}</div>
        </el-col>
        <el-col :span="6">
          <div>【目录】：{{ dialogObj.directoryName }}</div>
        </el-col>
        <el-col :span="6">
          <div>【方向】：{{ dialogObj.direction }}</div>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <div>【题干】：</div>
        <p class="text" v-html="dialogObj.question"></p>
      </el-row>
      <el-row v-if="dialogObj.questionType !== '3'">
        <div>
          {{ questionType(dialogObj.questionType) }}题
          选项：（以下选中的选项为正确答案）
        </div>
      </el-row>
      <!-- 多选框 -->
      <el-row v-if="dialogObj.questionType === '2'">
        <el-checkbox-group v-model="checkList">
          <div v-for="item in dialogObj.options" :key="item.id" class="checked">
            <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
          </div>
        </el-checkbox-group>
      </el-row>
      <!-- 单选框 -->
      <el-row v-if="dialogObj.questionType === '1'">
        <el-radio-group v-model="radio">
          <div v-for="item in dialogObj.options" :key="item.id" class="checked">
            <el-radio :label="item.id">{{ item.title }}</el-radio>
          </div>
        </el-radio-group>
      </el-row>
      <hr />
      <el-row>
        <div>
          【参考答案】：<el-button type="danger" @click="videoShowFn"
            >视频答案预览</el-button
          >
        </div>
        <div v-if="videoShow">
          <video :src="videoURL" controls="controls" class="video"></video>
        </div>
      </el-row>
      <hr />
      <el-row>
        【答案解析】：
        <div v-html="dialogObj.answer" style="display: inline-block"></div>
      </el-row>
      <hr />
      <el-row>
        【题目备注】：
        <div v-html="dialogObj.remarks" style="display: inline-block"></div>
      </el-row>
      <div style="display: flex; justify-content: end">
        <el-button type="primary" @click="btnCancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '../../api/hmmm/questions'
import { questionType, difficulty } from '../../api/hmmm/constants'
export default {
  props: {
    showDialog: {
      type: Boolean
    },
    preId: {
      type: [Number, String]
    }
  },
  data () {
    return {
      dialogObj: {},
      checkList: [],
      radio: '',
      videoURL: '',
      videoShow: false
    }
  },
  methods: {
    btnCancel () {
      this.$emit('update:showDialog', false)
    },
    videoShowFn () {
      this.videoShow = true
    },
    // 获取题目详情
    async getDetail (row) {
      const { data } = await detail(row)
      console.log(data)
      this.dialogObj = data
      this.videoURL = data.videoURL
      if (this.dialogObj.questionType === '2') {
        this.dialogObj.options.forEach((item) => {
          if (item.isRight === 1) {
            this.checkList.push(item.id)
          }
        })
      } else if (this.dialogObj.questionType === '1') {
        this.dialogObj.options.forEach((item) => {
          if (item.isRight === 1) {
            this.radio = item.id
          }
        })
      }
      console.log(this.checkList)
    },
    // 题型
    questionType (id) {
      const newArr = questionType.filter((item) => -item.value === -id)
      return newArr[0]?.label
    },
    // 难度
    diffType (id) {
      const newArr = difficulty.filter((item) => -item.value === -id)
      return newArr[0]?.label
    }
  }
}
</script>

<style scoped lang="less">
.container {
  .el-col {
    font-size: 14px;
    margin: 10px 0 !important;
  }
  .text {
    margin: 14px 0;
    color: blue;
  }
  .checked {
    margin: 10px 0;
  }
  .video {
    width: 400px;
    height: 300px;
  }
}
</style>
